<style type="text/css">
    ul li {
        padding: 0px;
        margin: 0px;
    }

    #panel {
        width: 500px;
        margin: 7px auto;
    }

    .goods_attr {
        overflow: hidden;
    }

    .goods_attr .label {
        font: 12px/30px '宋体';
        color: #777;
        width: 50px;;
        padding-right: 10px;
        float: left;
        display: block;
    }

    .goods_attr ul {
        float: left;
        width: 300px;
    }

    .goods_attr li {
        color: #333;
        overflow: hidden;
        position: relative;
        float: left;
        text-align: center;
        vertical-align: middle;
        border: 1px solid #999;
        text-indent: 0;
        cursor: pointer
    }

    .goods_attr li.b {
        border: 1px dotted #CCC;
        color: #DDD;
        pointer: none;
    }

    .goods_attr li.b img {
        opacity: 0.4;
    }

    .goods_attr li.sel {
        border: 1px solid #c80a28;
        color: #333;
    }

    .goods_attr li.text {
        margin: 5px 10px 5px 0;
        height: 26px;
        line-height: 26px;
        text-indent: 0;
        padding: 0 23px;
        font-style: normal;
        border-radius: 6px;		
    }

    .goods_attr li.img {
        margin-right: 10px;
        width: 35px;
        height: 35px;
        line-height: 35px;
        text-align: center;
    }


</style>
<div id="panel">
    <div id="panel_sel">
        <?
        /**
         *  <div class="goods_attr"><span class="label">attr1</span>
         * <ul>
         * <li class="text sel" val="10"><span>10</span><s></s></li>
         * <li class="text" val="11"><span>11</span><s></s></li>
         * </ul>
         * </div>
         */
        $i = 0;
        if($choosed_sku){
            $sku_info_name_arr = $choosed_sku['sku_info_name_arr'];
        }
        foreach ($sku_info_key_ch_arr as $kid => $skuv) {
            echo '<div class="goods_attr"><span class="label" val="' . $kid . '">' . $skuv . '</span>';
            echo '<ul>';
            foreach ($get_goods_sku_show_list[$kid] as $k => $sku) {
                // 判断是否已经勾选了
                $flag = '';
                if($sku_info_name_arr){
                    if($sku_info_name_arr[$i] == $sku['id']){
                        $flag = 'sel';
                    }
                }
                echo '<li class="text '.$flag.' " val="' . $sku['id'] . '"><span>' . $sku['val'] . '</span><s></s></li>';
            }
            $i++;
            echo '</ul>';
            echo '</div>';
        }

        ?>

    </div>

</div>

<script type="text/javascript">

    <?
    $detail_sku = [];
    foreach ($goods_sku_arr as $st) {
        $skus = implode('|', explode(',', $st['sku_info_name']));
        $detail_sku[] = ['sku_id' => $st['id'], 'attrs' => $skus, 'price' => $st['price'], 'sku_store' => $st['sku_store'], 'sku_sell_num' => $st['sku_sell_num'], 'sku_pic' => $st['sku_pic']];
    }
    ?>
    //SKU，Stock Keeping Uint(库存量单位)
    //    var sku_list = [
    //        {'attrs': '14|17|19|24', 'num': 120},
    //        {'attrs': '14|17|19|23', 'num': 10},
    //        {'attrs': '10|22|30|40', 'num': 28},
    //        {'attrs': '10|22|31|41', 'num': 220},
    //        {'attrs': '10|22|32|40', 'num': 130},
    //        {'attrs': '11|23|32|41', 'num': 120},
    //    ];

    var sku_list = JSON.parse('<?=json_encode($detail_sku);?>')
    var sku_len = '<?=sizeof($goods_sku_arr[0]['sku_info_key_ch_arr']); ?>'

    console.log(sku_list)

    //获取所有包含指定节点的路线
    function filterProduct(ids) {
        var result = [];
        $(sku_list).each(function (k, v) {
            _attr = '|' + v['attrs'] + '|';
            _all_ids_in = true;
            for (k in ids) {
                if (_attr.indexOf('|' + ids[k] + '|') == -1) {
                    _all_ids_in = false;
                    break;
                }
            }
            if (_all_ids_in) {
                result.push(v);
            }

        });
        return result;
    }

    //获取 经过已选节点 所有线路上的全部节点
    // 根据已经选择得属性值，得到余下还能选择的属性值
    function filterAttrs(ids) {
        var products = filterProduct(ids);
        // (products);
        var result = [];
        $(products).each(function (k, v) {
            result = result.concat(v['attrs'].split('|'));
        });
        return result;
    }


    //已选择的节点数组
    function _getSelAttrId() {

        var list = [];
        $('.goods_attr li.sel').each(function () {
            list.push($(this).attr('val'));
        });
        return list;
    }

    $('.goods_attr li').click(function () {
        if ($(this).hasClass('b')) {
            return;//被锁定了
        }
        if ($(this).hasClass('sel')) {
            $(this).removeClass('sel');
        } else {
            $(this).siblings().removeClass('sel');
            $(this).addClass('sel');
        }
        var select_ids = _getSelAttrId();

        //已经选择了的规格
        var $_sel_goods_attr = $('li.sel').parents('.goods_attr');

        // step 1
        var all_ids = filterAttrs(select_ids);

        //获取未选择的
        var $other_notsel_attr = $('.goods_attr').not($_sel_goods_attr);

        //设置为选择属性中的不可选节点
        $other_notsel_attr.each(function () {
            set_block($(this), all_ids);

        });

        //step 2
        //设置已选节点的同级节点是否可选
        // 已选中的节点目前是否可选
        $_sel_goods_attr.each(function () {
            update_2($(this));
        });

        // step3
        // 是否已经选择完毕，调整页面参数
        change_page_info();


    });

    function change_page_info() {
        var list = [];
        $('.goods_attr li.sel').each(function () {
            list.push($(this).attr('val'));
        });
        if(list.length == 0){
            // window.location.href = 'htspxq.php?fid=' + '<?=$goods_id?>';
			
			 var goods_id=<?=$goods_id?>;
		    $.ajax({
        url: 'goods_id.php',
        type: 'POST',
        dataType: 'json',
        data: {sku_id: goods_id
		},
      })
      .done(function(respon) {
        if (respon.error==0) {


    $('#money').html(respon.money); 
	$('#vipmoney').html(respon.vipmoney); 
	document.getElementById('img').src = respon.img;
	
        }
      })	
	
        }
	//	alert(sku_len);
        if (list.length == sku_len) {
            // 获取选中sku的数据
            var lsx = "";
            $(list).each(function (k, v) {
                lsx += '|' + v;
            });
            $(sku_list).each(function (k, v) {
                attr = '|' + v['attrs'];
                if (lsx === attr) {
                    // 价格
                    price = v['price'];
                    // sku图片
                    sku_pic_list = v['sku_pic'];
                    // 库存
                    sku_store = v['sku_store'];
                    // 修改价格
                    $(".sys_item_price").text(price);

                    // 页面刷新到sku
					
								 var goods_id=v['sku_id'];
		    $.ajax({
        url: 'goods_id.php',
        type: 'POST',
        dataType: 'json',
        data: {sku_id: goods_id
		},
      })
      .done(function(respon) {
        if (respon.error==0) {

    $('#money').html(respon.money); 
    $('#skuid').val(respon.skuid); 	
	document.getElementById('img').src = respon.img;
	$('#vipmoney').html(respon.vipmoney); 


        }
      })
					
                 //  window.location.href = 'htspxq.php?fid=' + '<?=$goods_id?>' + '&sku_id=' + v['sku_id']
					
                    // 修改图片
//                    if (sku_pic_list != '') {
//                        sku_pic_list = sku_pic_list.split(",");
//                    }
//                    htmlp = "";
//                    if (sku_pic_list.length > 0) {
//                        $(sku_pic_list).each(function (g, s) {
//                            htmlp += '<li><img src="' + s + '" height="400" width="400"/></li>'
//                        });
//
//                    }
//                    counter = 0
//                    if (htmlp) {
//                        console.log(htmlp)
//                        $('.am-slides').html('');
//
//                        $('#lunbotu').flexslider('addSlide', htmlp);
//
//                    }
                }

            });

        }
    }

    function update_2($goods_attr) {
        // 若该属性值 $li 是未选中状态的话，设置同级的其他属性是否可选
        var select_ids = _getSelAttrId();
        var $li = $goods_attr.find('li.sel');

        var select_ids2 = del_array_val(select_ids, $li.attr('val'));

        var all_ids = filterAttrs(select_ids2);

        set_block($goods_attr, all_ids);
    }

    function set_block($goods_attr, all_ids) {

//根据 $goods_attr下的所有节点是否在可选节点中（all_ids） 来设置可选状态
        $goods_attr.find('li').each(function (k2, li2) {

            if ($.inArray($(li2).attr('val'), all_ids) == -1) {
                $(li2).addClass('b');
            } else {
                $(li2).removeClass('b');
            }

        });

    }
    function del_array_val(arr, val) {
//去除 数组 arr中的 val ，返回一个新数组
        var a = [];
        for (k in arr) {
            if (arr[k] != val) {
                a.push(arr[k]);
            }
        }
        return a;
    }

</script>
